<template>
  <section>
    <el-button type="primary" @click="open">打开弹窗</el-button>

    <el-dialog v-model="dialogVisible" title="一行两列" size="default">
      <el-inline-form
        label-size="default"
        :model="formInline"
        :span="12"
        :use-options="false"
      >
        <el-inline-form-item label="Approved by" :span="12">
          <el-input
            v-model="formInline.user"
            placeholder="Approved by"
            clearable
          />
        </el-inline-form-item>
        <el-inline-form-item label="Activity zone" :span="12">
          <el-select
            v-model="formInline.region"
            placeholder="Activity zone"
            clearable
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-inline-form-item>
        <el-inline-form-item label="Activity time" :span="12">
          <el-date-picker
            v-model="formInline.date"
            type="date"
            placeholder="Pick a date"
            clearable
          />
        </el-inline-form-item>
      </el-inline-form>
    </el-dialog>
  </section>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

const dialogVisible = ref(false)

const formInline = reactive({
  user: '',
  region: '',
  date: '',
  age: '',
  orderId: '',
  cascaders: [],
})
const open = () => {
  dialogVisible.value = true
}
</script>

<style scoped lang="scss"></style>
